<template>
	<view>
		<uni-list>
			<uni-list-item clickable @tap="navigate('../gongdans/gongdans', {status: 0})" 
			title="待完成工单" showBadge :badgeText="tasks.workOrderNum">
			</uni-list-item>
			
			<uni-list-item v-if="tasks.hasNewestTask" clickable 
			@tap="navigate('../chaobiaos/chaobiaos')" title="最新抄表任务待完成">
			
			</uni-list-item>
		</uni-list>

		<view style="margin-top: 100rpx;"></view>

		<uni-grid :column="4" :showBorder="false">
			<uni-grid-item url="../gongdans/gongdans">
				<image class="btn-icon" src="../../static/icons/gdgl.png" mode="widthFix"></image>
				<text class="btn-text">工单列表</text>
			</uni-grid-item>
			<uni-grid-item url="../chaobiaos/chaobiaos">
				<image class="btn-icon" src="../../static/icons/cbgl.png" mode="widthFix"></image>
				<text class="btn-text">抄表管理</text>
			</uni-grid-item>
			<uni-grid-item url="../bills/bills">
				<image class="btn-icon" src="../../static/icons/bills.png" mode="widthFix"></image>
				<text class="btn-text">账单列表</text>
			</uni-grid-item>
			<uni-grid-item url="../ucenter/ucenter">
				<image class="btn-icon" src="../../static/icons/ucenter.png" mode="widthFix"></image>
				<text class="btn-text">个人中心</text>
			</uni-grid-item>
		</uni-grid>
		
		<view class="mask" v-if="unauthed">
			<view class="bottom card" style="margin: 0;">
				<view style="font-weight: bold;margin-bottom: 50rpx;">使用前需要验证您的身份信息</view>
				<form @reset="reset" style="width: 100%;">
					<view class="field">
						<view class="field-title">姓名</view>
						<input focus auto-focus adjust-position class="field-content" placeholder="请输入真实姓名" name="name" type="text"
						 v-model="auth.name" maxlength="10" confirm-type="next" />
					</view>
					<view class="field">
						<view class="field-title">身份证</view>
						<input adjust-position class="field-content" placeholder="请输入身份证号码" name="idCard" type="idcard" v-model="auth.idCard"
						 maxlength="18" confirm-type="next" />
					</view>
					<view class="field">
						<view class="field-title">手机号</view>
						<input adjust-position class="field-content" placeholder="请输入手机号码" name="idCard" 
							type="number" v-model="auth.phone" maxlength="11" confirm-type="done" />
					</view>
					<button class="btn-capsule" form-type="submit" @tap="authenticate">认证</button>
				</form>
			</view>
		</view>
		
		<view class="mask" v-if="masked">
			<view class="prompt" style="text-align: center;height: 515rpx;">
				<block v-if="auth_failed===true">
					<image src="../../static/icons/fail.png" mode="widthFix" style="margin-top: 50rpx;width: 80rpx;"></image>
					<view style="margin-top: 50rpx;">你的申请未通过</view>
					<view style="margin-bottom: 80rpx;" class="gst">请重新提交资料或联系管理员</view>
				</block>
				<block v-else>
					<image src="../../static/icons/ok.png" mode="widthFix" style="margin-top: 50rpx;width: 80rpx;"></image>
					<view style="margin-top: 50rpx;">你的申请已通过</view>
					<view style="margin-bottom: 80rpx;" class="gst">请进入首页</view>
				</block>
				<view class="close" @tap="masked=false">×</view>
				<button size="mini" @tap="masked=false" class="capsule" style="color: white;width: 250rpx;background-color: var(--color-ok);">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'

	const app = getApp()

	export default {
		components: {
			uniIcons, uniList, uniListItem, 
		},
		onPullDownRefresh() {
			this.getTasks()
		},
		data() {
			return {
				masked:false,
				unauthed: false,
				auth_failed: false,
				auth: {
					phone: '',
					name: '',
					idCard: '',
				},
				token: '',
				tasks:{
					workOrderNum: '',
					hasNewestTask:false 	// 是否有新抄表任务
				},
				name: '',
				id: '',
			}
		},
		async onLoad(opt) {
			await this.assertLogin(app.globalData.domain + 'staff/login')
		},
		watch:{
			token(newToken, oldToken){
				this.unauthed=false
				this.getTasks()
			}
		},
		methods: {
			async assertLogin(url, extra={}, method="POST"){
				let relogin = true
				if(relogin){
					// 重新获取code登录码
					const [err, res] = await uni.login()
					console.log(res.code)
					uni.request({
						url,
						method,
						data: {
							code: res.code,
							...extra,
						},
						success: res => {
							const {data} = res
							console.log(data)
							if(data.code==402){							// 从未认证过
								this.unauthed=true
								return ''
							}else if(data.code==200){					// 认证过且未过期
								this.auth_failed=false
								this.token = app.globalData.token = data.data
								return data.data
							}else if(data.code==500){					// 认证失败
								this.auth_failed=true
								return ''
							}
						},
						fail: err => {
							console.log(err.errMsg)
						},
						complete: () => {}
					});
				}
			},
			navigate(url, data={}){
				const keys = []
				for (const key in data) {
					keys.push(`${key}=${data[key].toString()}`)
				}
				const dst = `${url}?${keys.join('&')}`
				console.log(dst)
				uni.navigateTo({
					url: dst,
				});
			},
			async getTasks(){
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.domain + 'index',
					method: 'GET',
					data: {},
					success: res => {
						const {data} = res
						uni.stopPullDownRefresh()
						if(data.code==200){
							console.log(data)
							this.tasks = data.data
						}else if(data.code==500){
							uni.showToast({
								icon: 'none',
								title: data.message,
							})
						}else if(data.code==401){
							// 登录过期，重新登录
							this.assertLogin(app.globalData.domain + 'staff/login').then(()=>{
								this.getTasks()
							})
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			getPhoneNumber(e) {
				console.log(e.detail)
			},
			async authenticate() {
				const data = await this.assertLogin(app.globalData.domain + 'staff/login', {
					phone: this.auth.phone,
					name: this.auth.name,
					idCard: this.auth.idCard.toLocaleLowerCase(),
				});
				this.masked=true
			}
		}
	}
</script>

<style scoped>

</style>
